<template>
  <div>
    <div class="items1">
      <div id="one" class="item1"></div>
      <div id="two" class="item2">
        <div class="x1">
          <div class="y1">
            <div class="z1">
              <span>会员店数</span>
            </div>
            <div class="z2">
              <span>{{vipCounts}}</span>
            </div>
          </div>
        </div>
        <div class="x2">
          <div class="y1">
            <div class="z1">
              <span>商品种类</span>
            </div>
            <div class="z2">
              <span>{{goodsCounts}}</span>
            </div>
          </div>
        </div>
        <div class="x3">
          <div class="y3">
            <div class="z1">
              <span>供应厂家</span>
            </div>
            <div class="z2">
              <span>{{supplierCounts}}</span>
            </div>
          </div>
        </div>
        <div class="x4">
          <div class="y3">
            <div class="z1">
              <span>发货单量</span>
            </div>
            <div class="z2">
              <span>{{dispatchCounts}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="three" class="items2"></div>
    <div class="items3"></div>
  </div>
</template>
<script>
import statisticsApi from "@/api/statistics";
import goodsApi from "@/api/goods";
import memberApi from "@/api/member";
import supplierApi from "@/api/supplier";
import dispatchApi from "@/api/dispatch"

export default {
  data() {
    return {
      total: "",
      count: {
        yfb: 0,
        xzb: "",
        rsb: "",
        psb: "",
        xcb: "",
        cwb: "",
        pxb: "",
      },
      list: [],
      list1: [],
      vipCounts:'',
      goodsCounts:'',
      supplierCounts:'',
      dispatchCounts:''
    };
  },
  created() {
    this.fetch();
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetch() {
      goodsApi.getAllGoodsMessage().then((response =>{
        this.goodsCounts = response.data.length;
      }))
      memberApi.getAllVipsMessage().then((response => {
        this.vipCounts = response.data.length;
      }))
      supplierApi.getAllSuppliersMessage().then((response =>{
        this.supplierCounts = response.data.length;
      }))
      dispatchApi.getAllDispatchsMessage().then((response =>{
        this.dispatchCounts = response.data.length;
      }))
    },
    fetchData() {
      statisticsApi.getAllEmployeesCounts().then((response) => {
        console.log(response.data);
        this.count.yfb = response.data.yfb;
        this.count.xzb = response.data.xzb;
        this.count.rsb = response.data.rsb;
        this.count.psb = response.data.psb;
        this.count.xcb = response.data.xcb;
        this.count.cwb = response.data.cwb;
        this.count.pxb = response.data.pxb;
        var that = this.count;
        this.total =
          that.yfb +
          that.xzb +
          that.rsb +
          that.psb +
          that.xcb +
          that.cwb +
          that.pxb;
        this.initCharts1();
      });

      goodsApi.getAllGoodsMessage().then((response) => {
        var that = response.data;
        for (var i = 0; i < response.data.length; i++) {
          var x1 = that[i].gname;
          var x2 = that[i].gcounts;
          this.list.push({ key: x1, value: x2 });
          this.list1.push(that[i].gname);
        }
        this.initCharts2();
      });
    },
    initCharts1() {
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("one"));

      var option = {
        title: {
          text: "公司组成及占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "部门人数",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.count.yfb, name: "研发部" },
              { value: this.count.xzb, name: "行政部" },
              { value: this.count.rsb, name: "人事部" },
              { value: this.count.psb, name: "配送部" },
              { value: this.count.xcb, name: "宣传部" },
              { value: this.count.cwb, name: "财务部" },
              { value: this.count.pxb, name: "培训部" },
            ],
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
    initCharts2() {
      var echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("three"));

      var builderJson = {
        charts: this.list,
      };

      var waterMarkText = "";

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      canvas.width = canvas.height = 100;
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      ctx.globalAlpha = 0.08;
      ctx.font = "20px Microsoft Yahei";
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(waterMarkText, 0, 0);

      var option = {
        backgroundColor: {
          type: "pattern",
          image: canvas,
          repeat: "repeat",
        },
        tooltip: {},
        title: [
          {
            text: "商品库存概览",
            left: "46%",
            textAlign: "center",
          },
        ],
        grid: [
          {
            top: 50,
            width: "90%",
            bottom: "2%",
            left: 10,
            containLabel: true,
          },
        ],
        xAxis: [
          {
            type: "value",
            max: builderJson.all,
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            data: Object.values(this.list1),
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            stack: "chart",
            z: 3,
            label: {
              position: "right",
              show: true,
            },
            data: Object.keys(builderJson.charts).map(function (key) {
              return builderJson.charts[key];
            }),
          },
        ],
      };
      myChart.resize();
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.title {
  text-align: center;
  font-size: 26px;
  color: #3399ff;
  font-family: "华文隶书";
}
.item1 {
  width: 48.5%;
  height: 340px;
 
  float: left;
}
.item2 {
  width: 51%;
  height: 340px;
  float: right;
}
.items1 {
  width: 100%;
  height: 340px;
}
.items2 {
  width: 100%;
  height: 500px;
  
}
.x1 {
  width: 49%;
  height: 50%;
  float: left;
}
.x2 {
  width: 49%;
  height: 50%;
  float: right;
}
.x3 {
  width: 49%;
  height: 50%;
  float: left;
}
.x4 {
  width: 49%;
  height: 50%;
  float: right;
}
.y1{
    border: 1px solid rgb(84,112,198);
    height: 80px;
    width:120px;
    border-radius: 5px;
    text-align: center;
    top: 50%;
    transform: translateY(50%);
    margin: 0 auto;
    background: rgb(84,112,198);
}
.z1{
  margin: 8% 0 6px 0;
}
.y3{
    border: 1px solid rgb(84,112,198);
    height: 80px;
    width:120px;
    border-radius: 5px;
    text-align: center;
    top: 50%;
    transform: translateY(50%);
    margin: 0 auto;
    background: rgb(84,112,198);
}
</style>